﻿<script type="text/javascript">
	var Singleton = function( name ){
		this.name = name;
		this.instance = null;
	};
	Singleton.prototype.getName = function(){
		alert ( this.name );
	};
	Singleton.getInstance = function( name ){
		if ( !this.instance ){
			this.instance = new Singleton( name );
		}
		return this.instance;
	};

	var a = Singleton.getInstance( 'sven1' );
	var b = Singleton.getInstance( 'sven2' );
	alert ( a === b ); // true

	//或者：
	var Singleton = function( name ){
		this.name = name;
	};
	Singleton.prototype.getName = function(){
		alert ( this.name );
	};
	Singleton.getInstance = (function(){
		var instance = null;
		return function( name ){
			if ( !instance ){
				instance = new Singleton( name );
			}
			return instance;
		}
	})();

	var CreateDiv = (function(){
		var instance;
		var CreateDiv = function( html ){
			if ( instance ){
				return instance;
			}
			this.html = html;
			this.init();
			return instance = this;
		};
		CreateDiv.prototype.init = function(){
			var div = document.createElement( 'div' );
			div.innerHTML = this.html;
			document.body.appendChild( div );
		};
		return CreateDiv;
	})();

	var a = new CreateDiv( 'sven1' );
	var b = new CreateDiv( 'sven2' );
	alert ( a === b ); // true

	var CreateDiv = function( html ){
		this.html = html;

		this.init();
	};
	CreateDiv.prototype.init = function(){
		var div = document.createElement( 'div' );
		div.innerHTML = this.html;
		document.body.appendChild( div );
	};

	var ProxySingletonCreateDiv = (function(){
		var instance;
		return function( html ){
			if ( !instance ){
				instance = new CreateDiv( html );
			}
			return instance;
		}
	})();

	var a = new ProxySingletonCreateDiv( 'sven1' );
	var b = new ProxySingletonCreateDiv( 'sven2' );
	alert ( a === b );

	var MyApp = {};
	MyApp.namespace = function( name ){
		var parts = name.split( '.' );
		var current = MyApp;
		for ( var i in parts ){
			if ( !current[ parts[ i ] ] ){
				current[ parts[ i ] ] = {};
			}
			current = current[ parts[ i ] ];

		}
	};
	MyApp.namespace( 'event' );
	MyApp.namespace( 'dom.style' );
	console.dir( MyApp );
	// 上述代码等价于：
	var MyApp = {
		event: {},
		dom: {
			style: {}
		}
	};

	var user = (function(){
		var __name = 'sven',
		__age = 29;
		return {
			getUserInfo: function(){
				return __name + '-' + __age;
			}
		}
	})();

	Singleton.getInstance = (function(){
		var instance = null;
		return function( name ){
			if ( !instance ){
				instance = new Singleton( name );
			}
			return instance;
		}
	})();

</script>

<html>
<body>
	<button id="loginBtn">登录</button>
</body>
<script>
	var loginLayer = (function(){
		var div = document.createElement( 'div' );
		div.innerHTML = '我是登录浮窗';
		div.style.display = 'none';
		document.body.appendChild( div );
		return div;
	})();
	document.getElementById( 'loginBtn' ).onclick = function(){

		loginLayer.style.display = 'block';
	};
</script>
</html>


<html>
<body>
	<button id="loginBtn">登录</button>
</body>
<script>
	var createLoginLayer = function(){
		var div = document.createElement( 'div' );
		div.innerHTML = '我是登录浮窗';
		div.style.display = 'none';
		document.body.appendChild( div );
		return div;
	};
	document.getElementById( 'loginBtn' ).onclick = function(){
		var loginLayer = createLoginLayer();
		loginLayer.style.display = 'block';
	};
</script>
</html>

<script type="text/javascript">
	var createLoginLayer = (function(){
		var div;
		return function(){
			if ( !div ){
				div = document.createElement( 'div' );
				div.innerHTML = '我是登录浮窗';
				div.style.display = 'none';
				document.body.appendChild( div );
			}
			return div;
		}
	})();

	document.getElementById( 'loginBtn' ).onclick = function(){
		var loginLayer = createLoginLayer();
		loginLayer.style.display = 'block';
	};

	var createIframe= (function(){
		var iframe;
		return function(){
			if ( !iframe){
				iframe= document.createElement( 'iframe' );
				iframe.style.display = 'none';
				document.body.appendChild( iframe);
			}
			return iframe;
		}
	})();

	var getSingle = function( fn ){
		var result;
		return function(){
			return result || ( result = fn .apply(this, arguments ) );
		}
	};

	var createLoginLayer = function(){
		var div = document.createElement( 'div' );
		div.innerHTML = '我是登录浮窗';
		div.style.display = 'none';
		document.body.appendChild( div );
		return div;
	};
	var createSingleLoginLayer = getSingle( createLoginLayer );
	document.getElementById( 'loginBtn' ).onclick = function(){
		var loginLayer = createSingleLoginLayer();
		loginLayer.style.display = 'block';
	};

	//下面我们再试试创建唯一的iframe 用于动态加载第三方页面：
	var createSingleIframe = getSingle( function(){
		var iframe = document.createElement ( 'iframe' );
		document.body.appendChild( iframe );
		return iframe;
	});
	document.getElementById( 'loginBtn' ).onclick = function(){
		var loginLayer = createSingleIframe();
		loginLayer.src = 'http://baidu.com';
	};

	var bindEvent = function(){
		$( 'div' ).one( 'click', function(){
			alert ( 'click' );
		});
	};
	var render = function(){
		console.log( '开始渲染列表' );
		bindEvent();
	};
	render();

	render();
	render();

	var bindEvent = getSingle(function(){
		document.getElementById( 'div1' ).onclick = function(){
			alert ( 'click' );
		}
		return true;
	});
	var render = function(){
		console.log( '开始渲染列表' );
		bindEvent();
	};
	render();
	render();
	render();

</script>